<!DOCTYPE HTML>
<html>
    <head>
        <title>Youniversity</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
        
        <link rel="stylesheet" href="style/style.css"/>
        <script src="js/lib/cordova-1.7.0.js"></script>
        <script src="js/lib/iscroll.js"></script>

        <script type="text/javascript">

            var scrollableframe;
            function loaded() {
                // scrollableframe = new iScroll('scrollableframe',
                //                       { useTransition:false,
                //                         checkDOMChanges: true,
                //                         hideScrollbar: true,
                //                         fixedScrollbar:true,
                //                         useTransform: false,
                //                         bounceLock: true,
                //                         onBeforeScrollStart: function (e) {
                //                             var target = e.target;
                //                             while (target.nodeType != 1) target = target.parentNode;

                //                             if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && target.tagName != 'BUTTON')
                //                                 e.preventDefault();
                //                         } }
                //                     );
                // var allSelects2 = $('input');
                // allSelects2.each(function(index, item) {
                //                   item.addEventListener('touchstart' /*'mousedown'*/, function(e) { e.stopPropagation(); }, false);
                //                 });

                $('.button')
                    .on('touchstart', function () {
                        $(this).addClass('fake-active');
                    })
                    .on('touchend', function() {
                        $(this).removeClass('fake-active');
                    })
                    .on('touchcancel', function() {
                        $(this).removeClass('fake-active');
                    });

                var allSelects = $('button');
                allSelects.each(function(index, item) {
                                  item.addEventListener('touchstart', function(e) { /*e.stopPropagation();*/ $(this).addClass("fake-active"); }, false);
                                  item.addEventListener('touchend', function(e) { $(this).removeClass("fake-active"); }, false);
                                  item.addEventListener('touchcancel', function(e) { $(this).removeClass("fake-active"); }, false);
                                });
            }

            //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            document.addEventListener('DOMContentLoaded', loaded, false);

        </script>
    </head>
    <body class="page">
        <nav>
            <ul>
                <li><img src="resources/img/logo_grey_small.png"></li>
                <li><span>Youniversity</span></li>
            </ul>
        </nav>
        <header>Login</header>

<!-- <div id="scrollableframe">
    <div class="scroller"> -->

        <div class="frame">
            <form>
                <p>Matricola<br>
                    <input type="text"></p>
                <p>Password<br>
                    <input type="password"></p>

                <div class="centercontent">
                    <button type="button">
                        <span class="icon tick"></span>
                        <span class="label">Entra</span>
                    </button>
                </div>
            </form>
        </div>
        <div class="lostpwd">
            <p><a href="register.html">Registrati</a> | <a href="pwdrecover.html">Recupera Password</a></p>
        </div>
        <div class="centercontent">
            <p>Sei solo curioso?</p>
            <a href="explore.html" class="button">Esplora Universita'</a>
            <!-- <br>
            <a href="teacher.html" class="button">Pagina professore</a> -->
            <!--<a href="explore.html" class="button">
                <span class="icon prova"></span>
                <span class="label">Entra</span></a>-->
        </div>

<!--     </div>
</div> -->
        <script src="js/lib/zepto.min.js"></script>
        <script src="js/ynv.js"></script>
    </body>
</html>